<template>
	<div style="background-color: rgb(241 241 241);position: absolute;left: 0;top: 0;right: 0;bottom: 0;">
		<div class="view">
			<div class="back-button" @click="goBack()" :style="'top:' + menuHeight + 'rpx'">
				<van-icon name="arrow-left" color="black" style="padding: 10rpx;" />
			</div>
			<image src="@/static/qqq.jpg" mode="aspectFill" class="img">
			</image>
			<div class="card">
				<van-card>
					<view slot="title">
						<!-- <div class="phb1">
                            <image src="@/static/18.png" mode="aspectFill" class="phb_img">
                            </image>
                        </div> -->
						<div style="text-align: center;margin: 30rpx 0 50rpx 0;">
							<span
								style="font-size: 36rpx;font-weight: bold;display: block;margin-top: 4rpx;">签到日期</span>
						</div>
						<div class="select_time_box">
							<div class="time_slot">
								<div class="time_slot_item" :class="item.active ? 'active' : ''"
									v-for="(item, key) in dateList" wx:key="key" :data-index="key">
									<div class="week">{{ item.week }}</div>
									<div class="date">{{ item.days }}</div>
								</div>
							</div>
						</div>
					</view>
				</van-card>
			</div>
			<div class="card2">
				<van-card>
					<view slot="title">
						<!-- <div class="phb1">
                            <image src="@/static/16.png" mode="aspectFill" class="phb_img">
                            </image>
                        </div> -->
						<div style="text-align: center;margin: 30rpx 0 50rpx 0;">
							<span
								style="font-size: 36rpx;font-weight: bold;display: block;margin-top: 4rpx;">我的成就</span>
						</div>
						<div style="text-align: center;height: 100rpx;margin: 13rpx 0;">
							<span style="font-weight: bold;color: #666666;">以获得奖励(积分)</span><br>
							<span style="font-size: 40rpx;font-weight: bold;display: block;margin-top: 4rpx;"
								v-if="list[0].integral">{{
                                    list[0].integral }}</span>
							<span style="font-size: 40rpx;font-weight: bold;display: block;margin-top: 4rpx;"
								v-if="list[0].integral == null">0</span>
						</div>

						<div style="text-align: center;">
							<span
								style="font-size: 36rpx;font-weight: bold;display: block;margin-top: 4rpx;">签到记录</span>
							<van-empty image="search" description="当前无记录" v-if="signlist.length == 0" />
							<div class="jl" v-for="(item, index) in signlist" :key="index" v-if="signlist.length > 0">
								<van-row gutter="10">
									<van-col span="4">
										<div style="border-radius: 20rpx;">
											<div style="width: 90rpx;height: 90rpx;">
												<image src="@/static/19.png" mode="aspectFill" class="recode_img">
												</image>
											</div>
										</div>
									</van-col>
									<van-col span="20">
										<div style="border-radius: 20rpx;background-color: #dedede;">
											<div>
												<span
													style="line-height: 90rpx;display: inline-block; margin-right: 180rpx;font-weight: bold;font-size: 30rpx;">
													{{ item.qd_time | data }}</span>
												<span>
													<van-button round size="small" color="#5f637d">+{{ item.get_jf
                                                    }}</van-button>
												</span>

											</div>

										</div>
									</van-col>
								</van-row>

							</div>
						</div>

					</view>
				</van-card>
				<div style=" position: fixed;left: 19%; bottom: 10%;">
					<van-button round type="danger" size="large" style="padding: 100rpx;" @click="qd">签到</van-button>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getDate,
		generateTime
	} from '../../utils/base.js'
	import {
		dateny,
		dateFormat,
		date
	} from '@/utils/fiters.js'
	export default {
		data() {
			return {
				list: [],
				menuHeight: '',
				dateList: [],
				index: '',
				signlist: [], //记录
				a: [] //记录日期，不重复
			}
		},
		// 检查用户是否登录？在哪个钩子函数
		onShow() {
			//胶囊高度
			const menu = uni.getMenuButtonBoundingClientRect()
			const menuHeight = menu.top + menu.height + 8
			this.menuHeight = menuHeight
			// this.getDateList()
			this.getsignrecord()
			this.getusersign()
		},

		methods: {
			goBack() {
				uni.switchTab({
					url: '/pages/my/index'
				})
			},
			//记录
			getsignrecord() {
				this.request({
					url: "/sign/record",
					method: "get",
				}).then((res) => {
					this.signlist = res.data.data;
					console.log('记录', this.signlist);
					// console.log(this.signlist[0].qd_time);
					// console.log(dateFormat(new Date(this.signlist[0].qd_time)));
					this.signlist.map(res => {
						const formattedDate = dateFormat(new Date(res.qd_time));
						console.log('formattedDate', formattedDate);
						if (!this.a.includes(formattedDate)) {
							this.a.push(formattedDate);
						}
					})
					this.getDateList()
				});
			},
			//展示日期
			getDateList() {
				this.dateList = []
				console.log(this.signlist);
				console.log(this.a);
				for (let i = 0; i < 5; i++) {
					const date = getDate(i)
					let time = dateFormat(date.timestamp)
					// console.log(time, '======time');
					this.a.map(res => {
						if (time == res) {
							date.active = true
						}
					})
					// console.log(date, 'date');
					date.index = i
					this.dateList.push(date)
					// console.log(this.dateList, 'this.dateList');
				}
			},
			//个人积分数据
			getusersign() {
				this.request({
					url: "/sign/list",
					method: "get",
				}).then((res) => {
					this.list = res.data.data
					console.log("个人积分数据", this.list[0].integral);
				});
			},
			// 点击选择日期
			// select_date(e) {
			//     let index = e.currentTarget.dataset.index
			//     this.index = index
			//     // this.dateList.forEach((item) => {
			//     //     console.log(item);
			//     //     item.active = false
			//     // })
			//     this.$forceUpdate()
			//     console.log(index);
			//     this.dateList[index].active = true
			//     console.log(dateFormat(this.dateList[index].timestamp));
			//     // let timelist = generateTime(getDate(index).timestamp)
			//     // console.log(timelist)
			//     // proxy.$emit("select", dateList[index], timelist)
			// },


			qd() {
				this.request({
					url: "/sign/add",
					method: "post",
				}).then((res) => {
					console.log("签到", res.message);
					// this.getsignrecord()   
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
					this.getsignrecord()
					// this.getusersign()
					// this.$forceUpdate()
				});
				// this.getDateList()
				// this.getsignrecord()
				// this.getusersign()
			}
		}
	}
</script>

<style scoped lang="scss">
	.img {
		width: 100%;
		height: 500rpx;
		mask: linear-gradient(360deg, transparent, #fff);
	}

	.recode_img {
		width: 100%;
		height: 100%;
	}

	.view {
		position: relative;
	}

	.card {
		position: relative;
		top: -110rpx;
		margin: 25rpx;
	}

	.card ::v-deep .van-card {
		border-radius: 10px !important;
		background-color: #ffffff !important;
		min-height: 300rpx !important;
	}

	.card2 ::v-deep .van-card {
		border-radius: 10px !important;
		background-color: #ffffff !important;
		min-height: 300rpx !important;
	}

	.back-button {
		position: absolute;
		/* top: 5%; */
		left: 8%;
		// height: 4%;
		// width: 7%;
		background-color: #ffffff;
		z-index: 2;
		border-radius: 50%;
		line-height: 50rpx;
		text-align: center;
	}

	.jl {
		margin: 30rpx 0;
	}

	// >>>.van-col {
	//     margin-right: 13rpx;
	// }

	.card2 {
		position: relative;
		top: -70rpx;
		margin: 25rpx;
	}

	.phb1 {
		width: 66%;
		height: 59rpx;
		margin: 0% 28%;
	}

	.phb_img {
		width: 70%;
		height: 100%;
	}

	.bottom-button {
		display: block;
		width: 160rpx;
		height: 40rpx;
	}

	.select_time_box {
		// width: 700rpx;
		margin: 20rpx auto;

		.time_slot {
			// width: 700rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.time_slot_item {
				border: 2px solid #ffffff;
				padding: 5px;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(238, 238, 238, .5);
				text-align: center;
				flex: 1;
				transition: all .4s;
				margin: 0 10px;

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}

				.week {
					color: #5e657d;
					font-size: 12px;
				}

				.iconfont {
					color: #c3bdf7;
					font-size: 20px;
					padding: 5px 0;
					font-weight: 900;
				}

				.date {
					color: #3250fa;
					font-size: 16px;
				}

				&.active {
					transition: all .4s;
					background: linear-gradient(to bottom, #3e3d44, #656a88);
					// box-shadow: 0 5px 15px rgb(156 155 165);
					// background-color: rgb(241, 241, 241);
					box-shadow: 0 5px 15px rgb(156, 155, 165);

					.week {
						color: #ffffff;
					}

					.iconfont {
						color: #ffffff;
					}

					.date {
						color: #ffffff;
					}
				}
			}
		}
	}
</style>
